<!--index.vue：文章管理页面结构-->
<template>
  <div class="article-management" :class="{ 'dialog-open': detailVisible, 'fullscreen': isFullscreen }">
    <!-- 搜索区域 -->
    <div class="search-section">
      <el-card>
        <el-form :model="searchForm" inline>
          <el-form-item label="关键词">
            <el-input v-model="searchForm.keyWords" placeholder="请输入关键词" clearable />
          </el-form-item>
          <el-form-item label="分类">
            <el-select v-model="searchForm.category_id" placeholder="请选择分类" clearable>
              <el-option v-for="(label, value) in categoryOptions" :key="value" :label="label" :value="value" />
            </el-select>
          </el-form-item>
          <el-form-item label="状态">
            <el-select v-model="searchForm.status" placeholder="请选择状态" clearable>
              <el-option label="全部" value="" />
              <el-option v-for="(label, value) in statusOptions" :key="value" :label="label" :value="value" />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="handleSearch">搜索</el-button>
            <el-button @click="handleReset">重置</el-button>
            <el-button type="success" :disabled="selectedArticles.length === 0" @click="handleAiCheck">
              AI审核 (已选中{{ selectedArticles.length }}条)
            </el-button>
          </el-form-item>
        </el-form>
      </el-card>
    </div>

    <!-- 文章列表 -->
    <div class="article-list">
      <el-card>
        <div slot="header">
          <span>文章列表</span>
        </div>

        <el-table
          v-loading="loading"
          :data="articleList"
          style="width: 100%"
          @selection-change="handleSelectionChange"
        >
          <el-table-column type="selection" width="48" />
          <el-table-column prop="title" label="标题" width="340" show-overflow-tooltip />
          <el-table-column prop="image" label="封面" width="140">
            <template slot-scope="scope">
              <el-image
                v-if="scope.row.image"
                style="width: 120px; height: 72px"
                :src="scope.row.image"
                fit="cover"
                :preview-src-list="[scope.row.image]"
              />
              <span v-else>无封面</span>
            </template>
          </el-table-column>
          <el-table-column prop="categoryId" label="分类" width="120" align="center">
            <template slot-scope="scope">
              <el-tag :type="getCategoryTagType(scope.row.categoryId)">
                {{ getCategoryLabel(scope.row.categoryId) }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="status" label="状态" width="120" align="center">
            <template slot-scope="scope">
              <el-tag :type="getStatusTagType(scope.row.status)">
                {{ getStatusLabel(scope.row.status) }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="views" label="浏览量" width="100" align="center" />
          <el-table-column label="操作" width="280" fixed="right" align="left">
            <template slot-scope="scope">
              <el-button size="mini" type="primary" @click="viewDetail(scope.row)">查看详情</el-button>
              <el-button v-if="canReview(scope.row.status)" size="mini" type="success" @click="handleReview(scope.row)">审核</el-button>
              <el-button v-if="canBan(scope.row.status)" size="mini" type="warning" @click="handleBan(scope.row)">封禁</el-button>
              <el-button v-if="canDelete(scope.row.status)" size="mini" type="danger" @click="handleDelete(scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>

        <div class="pagination-wrapper">
          <el-pagination
            :current-page="searchForm.page"
            :page-sizes="[10, 20, 50, 100]"
            :page-size="searchForm.pageSize"
            :total="total"
            layout="total, sizes, prev, pager, next, jumper"
            @current-change="handleCurrentChange"
            @size-change="handleSizeChange"
          />
        </div>
      </el-card>
    </div>

    <!-- 文章详情右侧显示组件 -->
    <div v-if="detailVisible && articleDetail" class="right-side-detail-panel" :class="{ 'fullscreen': isFullscreen }">
      <!-- 顶部导航栏 -->
      <div class="detail-header">
        <div class="header-left">
          <el-button
            type="text"
            class="back-btn"
            icon="el-icon-arrow-left"
            @click="detailVisible = false"
          >
            返回
          </el-button>
        </div>
        <div class="header-center">
          <h1 class="header-title">文章详情</h1>
        </div>
        <div class="header-right">
          <el-button
            type="text"
            class="action-btn"
            :icon="isFullscreen ? 'el-icon-copy-document' : 'el-icon-full-screen'"
            :title="isFullscreen ? '退出全屏' : '全屏显示'"
            @click="toggleFullscreen"
          />
        </div>
      </div>

      <!-- 文章内容区域 -->
      <div class="detail-content">
        <!-- 文章大图 -->
        <div v-if="articleDetail.image" class="article-image">
          <el-image
            class="main-image"
            :src="articleDetail.image"
            fit="cover"
            :preview-src-list="[articleDetail.image]"
          />
        </div>

        <!-- 文章标题和内容 -->
        <div class="article-body">
          <h2 class="article-title">
            {{ articleDetail.title }}
          </h2>

          <div class="article-meta">
            <el-tag
              size="mini"
              :type="getCategoryTagType(articleDetail.categoryId)"
              class="category-tag"
            >
              {{ getCategoryLabel(articleDetail.categoryId) }}
            </el-tag>
            <el-tag
              size="mini"
              :type="getStatusTagType(articleDetail.status)"
              class="status-tag"
            >
              {{ getStatusLabel(articleDetail.status) }}
            </el-tag>
            <span class="publish-time">{{ formatDateTime(articleDetail.createdAt) }}</span>
          </div>

          <!-- 文章详细信息 -->
          <div class="article-info">
            <div class="info-section">
              <h3 class="info-title">基本信息</h3>
              <div class="info-grid">
                <div class="info-item">
                  <span class="info-label">文章ID:</span>
                  <span class="info-value">{{ articleDetail.articleId }}</span>
                </div>
                <div class="info-item">
                  <span class="info-label">专栏ID:</span>
                  <span class="info-value">{{ articleDetail.columnId || '无' }}</span>
                </div>
                <div class="info-item">
                  <span class="info-label">作者ID:</span>
                  <span class="info-value">{{ articleDetail.authorId }}</span>
                </div>
                <div class="info-item">
                  <span class="info-label">审核人ID:</span>
                  <span class="info-value">{{ articleDetail.reviewerId || '无' }}</span>
                </div>
              </div>
            </div>

            <div class="info-section">
              <h3 class="info-title">时间信息</h3>
              <div class="info-grid">
                <div class="info-item">
                  <span class="info-label">创建时间:</span>
                  <span class="info-value">{{ formatDateTime(articleDetail.createdAt) }}</span>
                </div>
                <div class="info-item">
                  <span class="info-label">更新时间:</span>
                  <span class="info-value">{{ formatDateTime(articleDetail.updatedAt) }}</span>
                </div>
              </div>
            </div>

            <div class="info-section">
              <h3 class="info-title">审核信息</h3>
              <div class="info-grid">
                <div class="info-item">
                  <span class="info-label">审核状态:</span>
                  <el-tag
                    size="mini"
                    :type="getStatusTagType(articleDetail.status)"
                    class="status-tag"
                  >
                    {{ getStatusLabel(articleDetail.status) }}
                  </el-tag>
                </div>
                <div class="info-item">
                  <span class="info-label">审核意见:</span>
                  <span class="info-value">{{ articleDetail.reviewMessage || '无' }}</span>
                </div>
              </div>
            </div>

            <div class="info-section">
              <h3 class="info-title">其他信息</h3>
              <div class="info-grid">
                <div class="info-item">
                  <span class="info-label">标签:</span>
                  <span class="info-value">{{ articleDetail.tags || '无' }}</span>
                </div>
              </div>
            </div>
          </div>

          <div class="article-content">
            <h3 class="content-title">文章内容</h3>
            <div class="content-text" v-html="formatContent(articleDetail.content)" />
          </div>

          <div class="article-stats">
            <div class="stat-item">
              <i class="el-icon-view" />
              <span>浏览量: {{ articleDetail.views || 0 }}</span>
            </div>
          </div>
        </div>

        <!-- 文章图片 -->
        <div v-if="getImageUrls().length > 0" class="article-images">
          <h3 class="images-title">文章图片</h3>
          <div class="images-list">
            <div
              v-for="(imgUrl, index) in getImageUrls()"
              :key="index"
              class="image-item"
            >
              <el-image
                :src="imgUrl"
                fit="cover"
                :preview-src-list="getImageUrls()"
                class="content-image"
                :lazy="true"
                :initial-index="index"
              >
                <div slot="error" class="image-error">
                  <i class="el-icon-picture-outline" />
                  <p>图片加载失败</p>
                </div>
              </el-image>
              <div class="image-overlay">
                <span class="image-index">{{ index + 1 }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- AI审核结果对话框 -->
    <el-dialog title="AI审核结果" :visible.sync="aiReviewVisible" width="70%" :close-on-click-modal="false">
      <div class="ai-review-content">
        <div v-if="aiReviewResults.length === 0" class="no-results">
          <i class="el-icon-warning" />
          <p>暂无审核结果</p>
        </div>
        <div v-else>
          <div class="review-summary">
            <p>共审核 {{ aiReviewResults.length }} 篇文章，请选择要接受的结果：</p>
          </div>
          <div class="review-list">
            <div
              v-for="result in aiReviewResults"
              :key="result.id"
              class="review-item"
            >
              <div class="review-header">
                <el-checkbox
                  v-model="result.selected"
                  @change="handleReviewItemChange"
                >
                  <span class="article-title">{{ getArticleTitle(result.id) }}</span>
                </el-checkbox>
                <el-tag
                  :type="getReviewStatusTagType(result.status)"
                  size="small"
                >
                  {{ getReviewStatusLabel(result.status) }}
                </el-tag>
              </div>
              <div class="review-message">
                <strong>审核意见：</strong>
                <p>{{ result.reviewMessage }}</p>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="aiReviewVisible = false">取消</el-button>
        <el-button
          type="primary"
          :disabled="selectedReviewResults.length === 0"
          :loading="submittingReview"
          @click="submitAiReview"
        >
          提交审核 ({{ selectedReviewResults.length }})
        </el-button>
      </div>
    </el-dialog>

    <!-- 审核对话框 -->
    <el-dialog :title="dialogTitle" :visible.sync="reviewVisible" width="40%">
      <el-form :model="reviewForm" label-width="100px">
        <el-form-item label="文章ID">
          <el-input v-model="reviewForm.id" disabled />
        </el-form-item>
        <el-form-item v-if="reviewForm.status === 0 || reviewForm.status === 2 || reviewForm.status === 5" label="审核意见">
          <el-input
            v-model="reviewForm.reviewMessage"
            type="textarea"
            :rows="4"
            placeholder="请输入审核意见"
            maxlength="200"
            show-word-limit
          />
        </el-form-item>
        <el-form-item v-if="reviewForm.status === 6" label="封禁原因">
          <el-input
            v-model="reviewForm.reviewMessage"
            type="textarea"
            :rows="4"
            placeholder="请输入封禁原因"
            maxlength="200"
            show-word-limit
          />
        </el-form-item>
        <el-form-item v-if="reviewForm.status === 7" label="删除原因">
          <el-input
            v-model="reviewForm.reviewMessage"
            type="textarea"
            :rows="4"
            placeholder="请输入删除原因"
            maxlength="200"
            show-word-limit
          />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="reviewVisible = false">取消</el-button>
        <!-- 审核操作：显示通过和拒绝按钮 -->
        <template v-if="reviewForm.status === 0">
          <el-button type="success" :loading="submitting" @click="handleApprove">通过审核</el-button>
          <el-button type="danger" :loading="submitting" @click="handleReject">拒绝审核</el-button>
        </template>
        <!-- 其他操作：显示确认按钮 -->
        <el-button v-else type="primary" :loading="submitting" @click="submitReview">确认</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import articleMixin from '@/mixins/articleMixin'

export default {
  name: 'ArticleManagement',
  mixins: [articleMixin]
}
</script>

<style lang="scss" scoped>
@import '@/styles/article';
</style>
